<!--
  Generated template for the VipPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <div style="height: 4rem;width: 100%;background-color: #f8f9fd">
    <p style="padding: 0;margin: 0; text-align: center;line-height: 4rem;">VIP会员</p>
  </div>

</ion-header>


<ion-content>
  <div style="width: 100%;height: 6.5rem;">
    <div style="width: 5rem;height: 5rem; border-radius:50%;background-color: #222222;margin-top: 1.5rem;margin-left:2rem;box-shadow: -0rem 0.0rem 0.1rem #171717;float:left;">
      <img src={{this.imgUrl}} style="width: 5rem;height: 5rem;border-radius:50%;background-color: #222222;">
    </div>
    <div style="width: 6rem;height: 4rem;float: left;margin-top: 3.5rem;margin-left: 1.2rem;">
      <p style="margin: 0; font-size: 1.2rem">{{this.usrName}}</p>
      <!--<p style="margin: 0;font-size: 1.1rem;">秘密</p>-->
    </div>
  </div>
  <p style="font-size: 1.1rem;margin-left: 2rem;padding-top: 1rem;padding-bottom: 1rem;">购买乐汇小课堂会员</p>
  <div style="width: 86%;height: 4rem;background-color: #fdebd5;border: 1px solid #ff8314;border-radius:0.8rem;margin-left: 7%;margin-top: 1rem;">
    <span style="line-height: 4rem;font-size: 1.1rem;margin-left: 1rem;">vip会员</span>
    <span style="font-size: 0.8rem;line-height: 4rem;margin-right: 0.4rem;color: #6b6b6c;font-weight:bold;text-decoration:line-through;float: right">￥{{video.price}}</span>
    <span style="line-height: 4rem;font-size: 1.1rem;float: right;margin-right: 1rem;color: #fc5818">¥{{video.current_price}}</span>
  </div>

  <div style="margin-left: 3.5rem;font-size: 1rem;color:#232323;margin-top: 2rem;">
    <p style="font-size: 1.2rem;margin-left: -0.5rem;">VIP特权：</p>
    <p>1. 一年内观看所有视屏更新</p>
    <p>2. 8折优惠购买公司绘本</p>
    <p>3. 参加公司的各种优惠活动</p>
  </div>




  <div style="width: 100%;height: 3.5rem;position:fixed;bottom:0px;left:0px;">
    <div style="width: 75%;height:3.5rem; background-color: #f8f9fd;float:left;">
      <p style="line-height: 3.5rem;margin: 0;padding-left: 1rem;font-size: 1.3rem;">总计：¥{{this.video.current_price}}</p>
      <!--<p style="line-height: 3.5rem;margin: 0;padding-left: 1rem;font-size: 1.3rem;">{{this.video.current_price}}</p>-->


    </div>
    <div style="width: 25%; height: 3.5rem;background: #fe4f10;float:left;">
      <p style="line-height: 3.5rem;margin: 0;text-align: center;font-size: 1.2rem;color: #ffffff;" (click)="getPayVip()">微信支付</p>
    </div>
  </div>
</ion-content>
